<template>
	<view>
		<!-- 头部 -->
		<!-- <view style="position: relative;">
			<u-swiper :list="shop_xq.main_images_arr"  height='750'></u-swiper>
		</view> -->
		<u-swiper :list="shop_xq.main_images_arr" height="400" indicator indicatorMode="dot" circular></u-swiper>

		<view style="width: 100%;padding:40rpx 30rpx;box-sizing: border-box;border-radius: 20rpx 20rpx 0 0;background-color: #F5F5F5;">
			<view style="width: 100%;margin: 0 auto;box-sizing: border-box;background-color: #FFFFFF;padding:30rpx;overflow: hidden;position: relative;">
				<view style="width: 75%;float: left;">
					<view style="line-height: 50rpx;">
						<text style="font-size: 30rpx;color:#F04D00 ;">￥</text>
						<text style="font-size: 44rpx;color:#F04D00 ;">{{shop_xq.cost}}</text>
					</view>
					<view style="line-height: 50rpx;color: #000000;font-size: 30rpx;" class="">
						{{shop_xq.name || ''}}
					</view>
				</view>
				<view style="width: 25%;float: left;">
					<view @click="sharePoster" style="position: absolute;top: 50%;right: 30rpx;transform: translateY(-50%);">
						<text class="iconfont icon-fenxiang2" style="float: left;"></text>
						<text style="font-size: 26rpx;float: left;margin-left: 10rpx;">分享</text>
					</view>

				</view>
			</view>


			<!-- <view style="width: 100%;margin: 20rpx auto;background-color: #FFFFFF;border-radius: 20rpx;padding: 30rpx;box-sizing: border-box;">
				<view style="line-height: 50rpx;overflow: hidden;">
					<view style="width: 23%;float: left;color: #999999;font-size: 24rpx;">
						适合渠道
					</view>
					<view style="width: 77%;float: left;color: #000000;font-size: 24rpx;">
						{{shop_xq.channel || '无'}}
					</view>
				</view>
				<view style="line-height: 50rpx;overflow: hidden;">
					<view style="width: 23%;float: left;color: #999999;font-size: 24rpx;">
						招商区域
					</view>
					<view style="width: 77%;float: left;color: #000000;font-size: 24rpx;">
						{{shop_xq.area || '无'}}
					</view>
				</view>
				<view style="line-height: 50rpx;overflow: hidden;">
					<view style="width: 23%;float: left;color: #999999;font-size: 24rpx;">
						烹饪方式
					</view>
					<view style="width: 77%;float: left;color: #000000;font-size: 24rpx;">
						{{shop_xq.cooking || '无'}}
					</view>
				</view>
			</view> -->




			<!-- <view style="width: 100%;margin: 20rpx auto;background-color: #FFFFFF;border-radius: 20rpx;padding: 30rpx;box-sizing: border-box;">
				<view style="line-height: 50rpx;overflow: hidden;">
					<view style="width: 23%;float: left;color: #999999;font-size: 24rpx;">
						温馨提示
					</view>
					<view style="width: 77%;float: left;color: #F24700;font-size: 24rpx;">
						{{shop_xq.remind}}
					</view>
				</view>
			</view> -->

			<view style="width: 100%;margin: 20rpx auto;background-color: #FFFFFF;border-radius: 20rpx;padding: 30rpx;box-sizing: border-box;">
				<view style="overflow: hidden;position: relative;">
					<view style="width: 20%;float: left;">
						<image :src="xq.logo_image" style="width: 80rpx;height: 80rpx;border-radius: 50%;" mode=""></image>
					</view>
					<view style="width: 80%;float: left;">
						<view style="overflow: hidden;">
							<view style="width: 100%;float: left;overflow: hidden;margin-bottom: 10rpx;">
								<view style="line-height: 50rpx;color: #000000;font-size: 30rpx;" class="yihang">
									{{xq.name || ''}}
								</view>
								<view style="line-height: 30rpx;margin-top: 10rpx;width: 70%;float: left;">
									<!-- <image src="https://frozen-info.oss-cn-shanghai.aliyuncs.com/uploads/miniapp/xing.png" style="width: 26rpx;height: 26rpx;float: left;margin-top: 2rpx;" mode=""></image><text style="font-size: 24rpx;line-height: 30rpx;color: #FFBC58;margin-left: 6rpx;">{{xq.star || 0}}分</text> -->
									<text style="line-height: 30rpx;margin: 0 10rpx 0 0;color: #999999;font-size: 24rpx;">
										<text>收藏</text>
										<text style="margin-left: 5rpx;">{{xq.attention_num || 0}}</text>
									</text>
									<text style="line-height: 30rpx;margin: 0 10rpx;color: #999999;font-size: 24rpx;">
										<text>浏览</text>
										<text style="margin-left: 5rpx;">{{xq.views_num || 0}}</text>
									</text>
								</view>
								<view @click="jindian" style="width: 30%;float: left;">
									<view style="width: 152rpx;height: 50rpx;line-height: 50rpx;font-size: 24rpx;color: #FFFFFF;text-align: center;background-color: #0078FF;border-radius: 25rpx;">
										进店逛逛
									</view>
								</view>
							</view>

						</view>
					</view>

				</view>
			</view>


			<view class="" style="width: 100%;margin: 0 auto;display: flex;text-align: center;line-height: 100rpx;">
				<view @click="dibu(1)" style="flex: 1;position: relative;" :class="tabIndex==1?'active1':'a1'">
					产品信息
					<image v-if="tabIndex==1" src="https://static-1310167831.cos.ap-nanjing.myqcloud.com/uploads/20230411/2176b3fec852179c4610f402fdac0589.png" style="width: 100rpx;height: 12rpx;position: absolute;left: 40%;bottom: 16rpx;transform: translateX(-50%);"  mode=""></image>
				</view>
				<view @click="dibu(2)" style="flex: 1;position: relative;" :class="tabIndex==2?'active1':'a1'">
					产品推荐
					<image v-if="tabIndex==2" src="https://static-1310167831.cos.ap-nanjing.myqcloud.com/uploads/20230411/2176b3fec852179c4610f402fdac0589.png" style="width: 100rpx;height: 12rpx;position: absolute;left: 40%;bottom: 16rpx;transform: translateX(-50%);"  mode=""></image>
				</view>
			</view>

			<view v-if="tabIndex==1">
				<video v-if="shop_xq.video_url" style="width: 100%;" id="myVideo" :src="shop_xq.video_url" autoplay controls></video>
				<view style="overflow: hidden;">
					<RichText :nodes="content" />
				</view>
				<view class="" style="margin-top: 10rpx;">
					<image v-for="(a,b) in shop_xq.detail_images_arr" :key='b' :src="a" style="width: 100%;display: block;" mode="widthFix"></image>
				</view>
			</view>
			<view v-if="tabIndex==2">
				<view style="width: 100%;margin: 20rpx auto;overflow: hidden;box-sizing: border-box;padding: 0 10rpx;" class="box">
					<view @click="shenqing(item.id)" style="width: 310rpx;float: left;" v-for="(item,index) in list" :key='index'>
						<image :src="item.main_image" style="width: 310rpx;height: 310rpx;border-radius: 12rpx;" mode=""></image>
						<view style="width: 100%;">
							<view style="line-height: 40rpx;font-size: 28rpx;color: #333333;" class="yihang">{{item.name}}</view>
							<view style="line-height: 30rpx;font-size: 22rpx;color: #006EBC;margin: 4rpx 0;" class="yihang">适合渠道：{{item.channel}}</view>
							<view style="width: 100%;line-height: 60rpx;color: #333333;font-size: 28rpx;">
								<text style="color: #000000;font-size: 24rpx;font-weight: 600;">￥{{item.cost}}</text>
								<text v-if="item.unit" style="color: #666666;font-size: 22rpx;">/{{item.unit}}</text>
								<!-- <text style="display: inline-block;width: 120upx;height: 40upx;background: linear-gradient(0deg, #0078FF 0%, #0078FF 100%);border-radius: 20upx;line-height: 40upx;text-align: center;color: #FFFFFF;font-size: 22rpx;float: right;margin-top: 10rpx;margin-right: 8rpx;">
									立即申领
								</text> -->
							</view>
						</view>
					</view>
				</view>

				<view style="text-align: center;">
					<image v-if="list.length==0" :src="require('@/static/my/no-data.png')" style="width: 334rpx;"  mode="widthFix"></image>
					<view v-if="list.length==0" style="text-align: center;color: #999999;font-size: 30rpx;line-height: 60rpx;">
						暂无数据
					</view>
					<view v-if="list.length>0" style="text-align: center;color: #999999;font-size: 30rpx;line-height: 60rpx;width: 100%;font-size: 26rpx;">
						没有更多了
					</view>
				</view>
				<!-- && enmpy -->


			</view>

		</view>
		<uni-popup id="popup" ref="popup1" :type="type" :animation="true">
			<view class="" style="background-color: #FFFFFF;padding:20upx 30upx 0;border-radius: 20upx;width: 500rpx;">
				<view
					style="text-align: center;height: 100upx;line-height: 100upx;color: #333333;font-weight: 600;font-size: 32rpx;">
					提示
				</view>
				<view class="popup-content" style="text-align: center;font-size: 28upx;">请授权您的手机号</view>
				<view class="footer">
					<button @click="quxiao1"
						style="flex: 1;background-color: #f3f3f3;color: #333333;margin-right: 20rpx;font-weight: 600;"
						type="default">取消</button>
					<button @getphonenumber="login1" style="flex: 1;background-color: #000000;color: #FFFFFF;"
						open-type="getPhoneNumber">确定</button>

				</view>
			</view>
		</uni-popup>
		<qrcode-poster ref="poster" :title="shop_xq.name"
		        :subTitle="shop_xq.cost"
		        :headerImg="shop_xq.main_images_arr[0]"
		        :price="shop_xq.channel" :qrcode="shop_xq.qrcode" :quyu="shop_xq.area || '无'"
				:logoImg="xq.logo_image" :nametu="xq.name"></qrcode-poster>
		<noLoginToast ref="noLoginToast"/>
	</view>
</template>

<script>
	import QrcodePoster from '@/components/zhangyu-qrcode-poster/zhangyu-qrcode-poster5.vue'
	export default {
		components:{
			QrcodePoster
		},
		data(){
			return{
				scrollTop: 0,
				navheight: 0,
				statusBarHeight: 0,
				menuHeight: 0,
				haveBack: false,
				btnHeight: 30,
				btnWidth: 70,
				isScroll:true,
				slotheight:'0',
				xiao:true,
				cuttont:0,
				tabIndex:1,
				xz:'https://frozen-info.oss-cn-shanghai.aliyuncs.com/uploads/miniapp/54.png',
				wxz:'https://frozen-info.oss-cn-shanghai.aliyuncs.com/uploads/miniapp/53.png',

				id:'',
				shop_id:'',
				xq:{},
				shop_xq:{},
				content:'',
				status:0,
				type:'center',

				page:1,
				list:[],
				kk:false,
				enmpy:false,
			}
		},
		onShareTimeline: function(e) {
			let that=this
						// let title = '恭喜dog.东西获得成功'
						return {
							title: this.shop_xq.name,
							path:'/subpages/pages/yx_xq?id='+this.id,
							success:function(){
								that.post('api/share/share','',true).then(res=>{
									uni.showToast({
										title: res.msg,
										icon: "none",
										duration: 1000
									})
								})
							}
						}
					},
		onShareAppMessage: function(e) {
				let that=this
						// let title = '恭喜dog.东西获得成功'
						return {
							title: this.shop_xq.name,
							path:'/subpages/pages/yx_xq?id='+this.id,
							success:function(){
								that.post('api/share/share','',true).then(res=>{
									uni.showToast({
										title: res.msg,
										icon: "none",
										duration: 1000
									})
								})
							}
						}
					},
		onLoad(option) {

			// this.shop_id=option.shopid
			// this.yexq()
			if(option.id){
				this.id=option.id
			}else{
				let sceneStr = decodeURIComponent(option.scene);//这里的值就是二维码里带的参数值
				console.log("sceneStr",sceneStr)
				this.id=sceneStr
			}
			this.cpxq()
			this.shangpin()

		},
		// onReachBottom() {
		// 	if(this.tabIndex==2){
		// 		if (this.enmpy) {
		// 			return
		// 		} else {
		// 			this.shangpin()
		// 		}
		// 	}

		// },
		onPullDownRefresh() {
			this.cpxq()
		       setTimeout(function () {
		           uni.stopPullDownRefresh();
		       }, 1500);
		  },
		onPageScroll(t) {
			t.scrollTop > 30 ? this.xiao = false : this.xiao = true;
		},
		methods:{

			shangpin(){
				this.post('api/firm_data/recommend_goods',{id:this.id},true).then(res=>{
					if(res.code==1){
						this.list=res.data
					}
					// if(res.code==1){
					// 	if(this.page==1){
					// 		if (res.data.data== null || res.data.data.length == 0) {
					// 			this.kk = true
					// 			this.enmpy = true
					// 			return
					// 		} else if (res.data.data.length < 10) {
					// 			this.enmpy = true
					// 		}
					// 	}else{
					// 		if (res.data.data== null || res.data.data.length == 0) {
					// 			this.enmpy = true
					// 			return
					// 		} else if (res.data.data.length < 10) {
					// 			this.enmpy = true
					// 		}
					// 	}

					// 	this.page++
					// 	this.list.push(...res.data.data)
					// }else{
					// 	this.kk = true
					// 	uni.showToast({
					// 		title: res.msg,
					// 		icon: "none",
					// 		duration: 1000
					// 	})
					// }
				})
			},
			quxiao1: function() {
				this.$refs.popup1.close()
			},
			login1: function(e) {
				console.log(e)
				let that = this
				this.$refs.popup1.close()
				uni.login({
					provider: 'weixin',
					success: (code) => {
						console.log(code)
						this.post('api/wechat/phone', {
							code: code.code,
							iv: e.detail.iv,
							encryptedData: e.detail.encryptedData
						}, true).then(res => {
							console.log(res, '123455')
							if (res.code == 1) {
								uni.setStorageSync('mobile', res.data.phoneNumber)
							}

						})

					}
				})
			},

			// 选择规格
			xuanze(index){
				this.status=index
			},
			async sharePoster(){
				if (isLogin) {
					let isHasMobile = await this.$refs.noLoginToast.getPhoneNumber()
					console.log('%c [ isHasMobile ]-452', 'font-size:13px; background:pink; color:#bf2c9f;', isHasMobile)
					if (!isHasMobile) {
						return
					}
				}
				this.$refs.poster.showCanvas()
			},
			// 获取产品详情
			cpxq(){
				this.post('api/firm_data/goods_info',{id:this.id},true).then(res=>{
					console.log(res)
					if(res.code==1){
						this.xq=res.data.firm
						this.shop_id=res.data.firm.id
						this.shop_xq=res.data
						this.content=res.data.content.replace(/<img/gi,   '<img class="rich-img" ')
						                                                  .replace(/<p/g, '<div')
						                                                  .replace(/\/p>/g, '\div>');
					}
				})
			},

			getSysHeightInfo() {
				const that = this
				let statusBarHeight, menuButtonObject, menuHeight, navheight, haveBack, btnHeight, btnWidth

				statusBarHeight = uni.getSystemInfoSync().statusBarHeight
				//#ifdef MP-WEIXIN
				menuButtonObject = uni.getMenuButtonBoundingClientRect()
				menuHeight = menuButtonObject.height + (menuButtonObject.top - statusBarHeight) * 2
				navheight = menuHeight + statusBarHeight
				btnHeight = menuButtonObject.height
				btnWidth = menuButtonObject.width
				//#endif
				//#ifdef H5
				menuHeight = 44
				navheight = menuHeight + statusBarHeight
				btnHeight = 30
				btnWidth = 70
				//#endif
				if (getCurrentPages().length === 1) { // 当只有一个页面时
					haveBack = false;
				} else {
					haveBack = true;
				}
				that.navheight = navheight
				that.statusBarHeight = statusBarHeight
				that.menuHeight = menuHeight
				that.haveBack = haveBack
			},
			change(e) {
				// console.log(e)
				this.cuttont=e.detail.current
			},
			getTool(){
				uni.navigateBack({
					delta:1
				})
			},
			dibu(index){
				this.tabIndex=index
			},
			async jindian(){
				let isLogin = await this.$refs.noLoginToast.open()
				if (isLogin) {
					let isHasMobile = await this.$refs.noLoginToast.getPhoneNumber()
					console.log('%c [ isHasMobile ]-452', 'font-size:13px; background:pink; color:#bf2c9f;', isHasMobile)
					if (!isHasMobile) {
						return
					}
				}
				uni.navigateTo({
					url:'/fenbao/pages/wenzhang/qyxq?id='+this.shop_id+'&name='+this.xq.name
				})
			},
			async shen(index){
				let isLogin = await this.$refs.noLoginToast.open()
				if (isLogin) {
					let isHasMobile = await this.$refs.noLoginToast.getPhoneNumber()
					console.log('%c [ isHasMobile ]-452', 'font-size:13px; background:pink; color:#bf2c9f;', isHasMobile)
					if (!isHasMobile) {
						return
					}
				}
				if(this.shop_xq.option==2){
					uni.navigateTo({
						url:'ddtj?id='+this.id+'&shopid='+this.shop_id+'&type='+index+'&name='+this.shop_xq.spec[this.status].name+'&price='+this.shop_xq.spec[this.status].price
					})
				}else{
					uni.navigateTo({
						url:'ddtj?id='+this.id+'&shopid='+this.shop_id+'&type='+index
					})
				}
			},
			async shenqing(id){
				let isLogin = await this.$refs.noLoginToast.open()
				if (isLogin) {
					let isHasMobile = await this.$refs.noLoginToast.getPhoneNumber()
					console.log('%c [ isHasMobile ]-452', 'font-size:13px; background:pink; color:#bf2c9f;', isHasMobile)
					if (!isHasMobile) {
						return
					}
				}
				uni.redirectTo({
					url:'yx_xq?id='+id
				})
			}
		},
		mounted() {
			const that = this
			this.getSysHeightInfo()
			//#ifdef H5
			window.onscroll = function() {
				var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
				if (scrollTop > 1) {
					that.isScroll = true
				} else {
					that.isScroll = false
				}
			}
			//#endif

		},
		watch: {
			scrollTop(newValue, oldValue) {
				//#ifdef MP-WEIXIN
				const that = this
				if (newValue > 1) {
					that.isScroll = true
				} else {
					that.isScroll = false
				}
				//#endif
			}
		}
	}
</script>

<style lang="scss">
	.footer {
		display: flex;
		justify-content: space-between;
		border-top: 1px solid #f4f4f4;
		margin-top: 30rpx;
		padding-bottom: 20rpx;

		button {
			margin: 0 auto;
			width: 100%;
			background-color: #19BE6B;
			// width: 200upx;
			border-radius: 10upx;
			font-size: $uni-font-size-sm;
			// padding: 22upx 34upx;
			height: 80upx;
			font-size: 30rpx;
			line-height: 80upx !important;
			// line-height: 1;
			color: #FFFFFF;
		}

		button:after {
			border: 0;
		}
	}

	button:after {
		border: 0;
	}
	.rich-img{
		   max-width: 100%!important;
		   height: auto;
		   // background-color: #FFFFFF;
	}
	.active1{
		font-size: 30rpx;
		color: #000000;
	}
	.a1{
		color: rgba(0,0,0,.7);
		font-size: 30rpx;
	}
	page{
		background-color: #F5F5F5!important;
		font-family: Demibold;
	}
	.banner {
		height: 750upx;
		width: 750upx;
		.swiper-item {
			image {
				width:750upx;
				height: 750upx;
			}
		}
	}
	.box>view:nth-child(2n+1){
		margin-right: 50rpx;
	}
	.box>view{
		margin-bottom: 30rpx;
	}
	.tou{
		width: 54rpx;
		height: 54rpx;
		float: left;
		border-radius: 50%;
		margin-left: -20rpx;
	}
	.tou:first-child{
		margin-left: 0;
	}
	// .active{
	// 	display: inline-block;
	// 	width: 40rpx;
	// 	height:8rpx;
	// 	border-radius: 4rpx;
	// 	background-color: #FFFFFF;
	// }
	// .a{
	// 	display: inline-block;
	// 	width: 20rpx;
	// 	height:8rpx;
	// 	border-radius: 4rpx;
	// 	background-color: rgba(255,255,255,.5);
	// }



	// 头部
	.navbar {
		width: 100%;
		overflow: hidden;
		top: 0;
		left: 0;
		z-index: 2;
		flex-shrink: 0;
		color: #fff;
		font-size: 16px;
	}

	.nav-normal {
		position: relative;
	}

	.nav-fixed {
		position: fixed;
	}

	.header {
		position: fixed;
		width: 100%;
	}

	.logo-centent {
		display: flex;
		align-items: center;
	}

	.logo-centent image {
		width: 260rpx;
		height: 68rpx;
		margin-left: 20rpx;
	}

	.hearder-status {
		display: flex;
		align-items: center;
		position: absolute;
		padding-left: 30rpx;
		height: 100%;
		z-index: 99999;

	}

	.header-title {
		height: 100%;
		left: 0;
		right: 0;
		position: absolute;
		margin: auto;
		text-align: center;
	}
	.header-title image{
		position: absolute;
		width:270rpx;
		height: 35rpx;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}

	.header-title-left {
		height: 100%;
		left: 0;
		right: 0;
		position: absolute;
		margin: auto;
		text-align: left;
	}

	.back-text {
		margin-left: 7px;
		width: 100upx;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}

	.hearder-status .nav-title-left {
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: rgba(0, 0, 0, .8);
		width: 100%;
		font-weight: bold;
	}
	.hearder-status .nav-btn {
		/* background-color: rgba(255, 255, 255, .5);
		border-radius: 15px; */
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: rgba(0, 0, 0, .8);
		width: 50%;
		font-weight: bold;
	}

	.hearder-status .nav-btn .gotback,
	.hearder-status .nav-btn .gothome {
		flex: 1;
		text-align: center;
		font-size: 18px;
	}
	.Addslot {
		position: absolute;
		width: 100%;
	}
</style>
